<template>
  <div>
    <div class="pay_box">
      <el-form>
        <el-form-item>
          <el-input class="pay_date" v-model="form.nameAndSpell" placeholder="患者姓名"></el-input>
          <el-button type="primary" circle icon="el-icon-search" @click="getChartTable(-1)"></el-button>
          <el-button type="primary" style="float:right;" @click="exportExcel()" >导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pay_box">
      <table class="table-box">
        <thead>
          <tr>
            <th style="text-align:center;font-size:18px;" colspan="21">储值卡余额统计</th>
          </tr>
          <tr>
            <th>档案号</th>
            <th>患者姓名</th>
            <th>本金金额</th>
            <th>赠送金金额</th>
            <th>总金额</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tabList" :key="index">
            <td>{{item.archivesCode}}</td>
            <td>{{item.name}}</td>
            <td>￥{{item.patientMoney}}</td>
            <td>￥{{item.giveMoney}}</td>
            <td>￥{{item.totalMoney}}</td>
          </tr>
          <tr>
            <td>合计</td>
            <td></td>
            <td>￥{{orderDayCount.patientMoney}}</td>
            <td>￥{{orderDayCount.giveMoney}}</td>
            <td>￥{{orderDayCount.totalMoney}}</td>
          </tr>
        </tbody>
      </table>
      <br />
      <pager v-model="pager" @change-pagenum="getChartTable"></pager>
    </div>
    
  </div>
</template>
<script>
import Excel from '@/_js/excel.js'
export default {
  data() {
    return {
      form: {
        nameAndSpell: "",
        type: 1
      },
      orderDayCount:{
        patientMoney:'',
        giveMoney:'',
        totalMoney:''
      },
      showDay: false,
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      tabList: []
    };
  },
  mounted() {
    this.getChartTable();
    this.form.orderTimeStart = this.getDate();
    this.form.orderTimeEnd = this.getNewDate();
  },
  methods: {
    getChartTable() {
      let th = this;
      th.showLoading();
      let j = Object.assign(th.form, th.pager);
      th.$api.selectPatientBalance(j).then(res => {
          if (res.executed) {
            th.tabList = res.dataBody.list;
            let list= res.dataBody.list;
            let patientMoney=0;
            let giveMoney=0;
            let totalMoney=0;
            for(let i=0;i<list.length;i++){
                patientMoney+=Number(list[i].patientMoney)
                giveMoney+=Number(list[i].giveMoney)
                totalMoney+=Number(list[i].totalMoney)
            }
            th.orderDayCount.patientMoney=patientMoney
            th.orderDayCount.giveMoney=giveMoney
            th.orderDayCount.totalMoney=totalMoney
            th.pager.total = res.dataBody.total;
            th.showLoading(false);
          } else {
            th.$message.error(res.message);
            th.showLoading(false);
          }
        }).catch(error => {
          th.showLoading(false);
        });
    },
     exportExcel(){
      let th=this;
      //导出
      th.showLoading(true)
      th.$api.selectPatientBalance({pageSize:'10000',pageNum:'1'}).then(res => {
        if (res.executed) {
          if(res.dataBody!=undefined){
              let data= res.dataBody.list
              Excel(data,[{key:'archivesCode',name:'档案号'},{key:'name',name:'患者姓名'},
              {key:'patientMoney',name:'本金金额'},{key:'giveMoney',name:'赠送金额'},{key:'totalMoney',name:'总金额'}] ,'储值卡余额')
              th.showLoading(false)
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  .table-box{
    font-size: 12px;
  }
}
.pay_date {
  width: 10% !important;
  margin-right: 1%;
}
</style>